<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   

<!DOCTYPE html>
<html>

<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">

<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

<!-- 页面meta /-->

<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="plugins/morris/morris.css">
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet" href="plugins/select2/select2.css">
<link rel="stylesheet" href="plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet" href="plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="plugins/bootstrap-slider/slider.css">
<link rel="stylesheet" href="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

	<!-- 内容头部 -->
	<section class="content-header">
		<h1>
			用户列表 <small>全部用户</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="all-admin-index.html"><i
					class="fa fa-dashboard"></i> 首页</a></li>
			<li><a href="all-order-manage-list.html">用户管理</a></li>
			<li class="active">全部用户</li>
		</ol>
	</section>
	<!-- 内容头部 /-->

	<!-- 正文区域 -->
	<section class="content">

		<!-- .box-body -->
		<div class="box box-primary">
			<div class="box-header with-border">
				<h3 class="box-title">列表</h3>
			</div>

			<div class="box-body">

				<!-- 数据表格 -->
				<div class="table-box">

					<!--工具栏-->
					<div class="pull-left">
						<div class="form-group form-inline">
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新建"
									onclick='location.href="all-order-manage-edit.html"'>
									<i class="fa fa-file-o"></i> 新建
								</button>
								<button type="button" class="btn btn-default" title="删除"
									onclick='delIds()'>
									<i class="fa fa-trash-o"></i> 删除
								</button>
								 
								<button type="button" class="btn btn-default" title="刷新"
									onclick="window.location.reload();">
									<i class="fa fa-refresh"></i> 刷新
								</button>
							</div>
						</div>
					</div>
					
					<div class="col-md-2 data">
                        <select  id="groupSelected" class="form-control">
                            <option value="0"> 所有分组 </option>
                             <option  value="">11</option><option  value="">22</option>
                        </select>
                    </div>
					
				 	<div class="col-md-2 data">
                        <input type="text" id="name" value="${name }" class="form-control" placeholder="按姓名查找"   >
                    </div>
                    <button type="button" onclick="searchByCondition()" class="btn btn-sea" title="查询" >
                        <i class="fa fa-search"></i> 查询
                    </button>
					
					
					 
					<!--工具栏/-->

					<!--数据列表-->
					<table id="dataList"
						class="table table-bordered table-striped table-hover dataTable">
						<thead>
							<tr>
								<th class="" style="padding-right: 0px;">
								<input id="selall" type="checkbox"  value="${p.id }" class="icheckbox_square-blue"></th>
								<th class="sorting_asc">ID</th>
								<th class="sorting">姓名</th>
								<th class="sorting">注册日期</th>
								<th class="sorting">邮箱</th>
								<th class="sorting">电话</th>
								<th class="sorting">状态</th>
								<th class="text-center">操作</th>
							</tr>
						</thead>
						<tbody>
						<c:forEach items="${page.list}" var="p" varStatus="status">
							<tr>
								<td><input name="ids" type="checkbox" value="${p.id }"></td>
								<td>${ status.count }</td>
								<td>${ p.name }</td>
								<td>${ p.regDateTime }</td>
								<td>${ p.email }</td>
								<td>${ p.phone }</td>
								<td>${ p.status }</td>

								<td class="text-center">
									<button type="button" class="btn bg-olive btn-xs"
										onclick='location.href="all-order-manage-edit.html"'>订单</button>
									<button type="button" class="btn bg-olive btn-xs"
										onclick='location.href="all-order-manage-edit.html"'>详情</button>
									<button type="button" class="btn bg-olive btn-xs"
										onclick='location.href="all-order-manage-edit.html"'>编辑</button>
								</td>
							</tr>
						</c:forEach>

						</tbody>
						<!--
                            <tfoot>
                            <tr>
                            <th>Rendering engine</th>
                            <th>Browser</th>
                            <th>Platform(s)</th>
                            <th>Engine version</th>
                            <th>CSS grade</th>
                            </tr>
                            </tfoot>-->
					</table>
					<!--数据列表/-->

				</div>
				<!-- 数据表格 /-->


			</div>
			<!-- /.box-body -->

			<!-- .box-footer-->
			<div class="box-footer">
				<div class="pull-left">
					<div class="form-group form-inline">
						总共${page.totalPageNum} 页，共${page.totalRecords } 条数据。第${page.currentPageNum}页
						 <!-- 每页 <select class="form-control">
							<option>10</option>
							<option>15</option>
							<option>20</option>
							<option>50</option>
							<option>80</option>
						</select> 条 -->
					</div>
				</div>

				<div class="box-tools pull-right">
					<ul class="pagination">
						<li><a href="${pageContext.request.contextPath}/${page.url}&num=1&nameSelected=${name}" aria-label="Previous">首页</a></li>
						<li><a href="${pageContext.request.contextPath}/${page.url}&num=${page.prePageNum}&nameSelected=${name}">上一页</a></li>
						
						<c:forEach begin="${page.startPage}" end="${page.endPage}" var="pagenum">
			    			<li><a style="color: ${page.currentPageNum==pagenum?'#337ab7':'' }" href="${pageContext.request.contextPath}/${page.url}&num=${pagenum}&nameSelected=${name}">${pagenum}</a></li>
			    		</c:forEach>
						
						<li><a href="${pageContext.request.contextPath}/${page.url}&num=${page.nextPageNum}&nameSelected=${name}">下一页</a></li>
						<li><a href="${pageContext.request.contextPath}/${page.url}&num=${page.totalPageNum}&nameSelected=${name}" aria-label="Next">尾页</a></li>
					</ul>
				</div>

			</div>
			<!-- /.box-footer-->
		</div>
	</section>


	<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="plugins/raphael/raphael-min.js"></script>
	<script src="plugins/morris/morris.min.js"></script>
	<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script src="plugins/knob/jquery.knob.js"></script>
	<script src="plugins/daterangepicker/moment.min.js"></script>
	<script src="plugins/daterangepicker/daterangepicker.js"></script>
	<script src="plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script src="plugins/fastclick/fastclick.js"></script>
	<script src="plugins/iCheck/icheck.min.js"></script>
	<script src="plugins/adminLTE/js/app.min.js"></script>
	<script src="plugins/treeTable/jquery.treetable.js"></script>
	<script src="plugins/select2/select2.full.min.js"></script>
	<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script src="plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script src="plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script src="plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script src="plugins/bootstrap-markdown/js/markdown.js"></script>
	<script src="plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script src="plugins/ckeditor/ckeditor.js"></script>
	<script src="plugins/input-mask/jquery.inputmask.js"></script>
	<script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script src="plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="plugins/chartjs/Chart.min.js"></script>
	<script src="plugins/flot/jquery.flot.min.js"></script>
	<script src="plugins/flot/jquery.flot.resize.min.js"></script>
	<script src="plugins/flot/jquery.flot.pie.min.js"></script>
	<script src="plugins/flot/jquery.flot.categories.min.js"></script>
	<script src="plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script src="plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script src="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
	<script src="plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script>

		//批量删除
		function delIds() {
	        //获取所有需要删除的id
	        var allids = $("input[name='ids']:checked");
	        if (allids.length > 0) {
	            if (confirm("确实要删除这" + allids.length + "条数据吗?")) {
	                var ids = "";
	                allids.each(function () {
	                    ids = ids + $(this).val() + ",";
	                });
	                
	                $.ajax({
	                    type: "GET",
	                    url: "UserServlet?method=delete&ids=" + ids, 
	                    success: function (result) {
		                    alert(result);
	                        window.location.reload();
	                    },
	                    error: function (e) {
	                        console.log(e.status);
	                        console.log(e.responseText);
	                    }
	                });
	            }
	        } else {
	            //删除的时候没有选中，返回
	            alert("请选择要删除的数据");
	            return;
	        }
	    }
	
	 	//条件查询
	    function searchByCondition() {
	        //获取查询条件
	        var nameSelected = $("#name").val(); //姓名
	        location.href='${pageContext.request.contextPath}/UserServlet?method=userList'+'&num=${page.currentPageNum}&pageSize=${page.pageSize}&nameSelected=' + nameSelected;
	    }

	    
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});

		$(document).ready(function() {

			// 列表按钮 
			$("#dataList td input[type='checkbox']").iCheck({
				checkboxClass : 'icheckbox_square-blue',
				increaseArea : '20%'
			});
			// 全选操作 
			$("#selall").click(function() {
				var clicks = $(this).is(':checked');
				if (!clicks) {
					$("#dataList td input[type='checkbox']").iCheck("uncheck");
				} else {
					$("#dataList td input[type='checkbox']").iCheck("check");
				}
				$(this).data("clicks", !clicks);
			});
		});
	</script>
</body>

</html>